<template>
  <el-breadcrumb class="el-breadcrumb">
    <el-breadcrumb-item
        v-for="(breadcrumb, index) in breadcrumbs"
        :key="index"
        @click="navigateToRoute(breadcrumb.route)"
    >
      {{ breadcrumb.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  computed: {
    breadcrumbs() {
      const breadcrumbs = [];
      const matchedRoutes = this.$route.matched;

      matchedRoutes.forEach(route => {
        breadcrumbs.push({
          name: route.meta.title,
          route: route // 存储路由对象以供点击时使用
        });
      });

      return breadcrumbs;
    }
  },
  methods: {
    navigateToRoute(route) {
      // 使用Vue Router的编程式导航跳转到点击的路由
      this.$router.push(route);
    }
  }
};
</script>
<style scoped lang="scss">
.el-breadcrumb{
  padding: 10px;
  height: 40px;
  background-color: #ccc;
}
</style>